<!-- 头部（标题、时间） -->
<template>
  <div class="header-panel">
    <div class="header">
      <div class="header-btns">
        <div class="header-btn" v-for="(item, index) in btns" :key="index">
          <img
            :src="item.target === active ? item.activeImg : item.img"
            width="220px"
            height="46px"
          />
        </div>
        <TimeComponent />
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import TimeComponent from "./CTimeComponent.vue";
@Component({
  name: "HeaderCompoent",
  components: {
    TimeComponent
  }
})
export default class extends Vue {
  // get datePickerShow() {
  //   return this.$store.getters["videoPanel/datePickerShow"];
  // }

  active: string = "video";
  // dateValue = "";

  btns: any[] = [
    {
      name: "视频巡查",
      target: "video",
      img: require("../assets/images/panels/shipinxunchaqian.png"),
      activeImg: require("../assets/images/panels/shipinxunchahou.png")
    }
  ];
  created() {}
  mounted() {}
}
</script>

<style lang="scss" scoped>
.header-panel {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 93px;
  width: 1920px;
  background: #001022;
}
.header {
  height: 73px;
  width: 1920px;
  display: flex;
  background-size: auto 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url(../assets/images/panels/toubu.png);
  & > * {
    pointer-events: auto;
  }
  .header-btns {
    display: flex;
    width: 440px;
    height: 46px;
    margin: 27px 0 0 620px;
    .header-btn {
      cursor: pointer;
      width: 220px;
      height: 73px;
      margin-left: -20px;
    }
  }
  .header-data-time {
    display: flex;
    width: 480px;
    height: 28px;
    margin: 35px 0 0 20px;
    font-size: 16px;
    font-family: Alibaba_PuHuiTi_2_65_Medium;
    font-style: italic;
    line-height: 30px;
    color: #1658a0;
    .header-data-time-picker {
      margin: 0 10px;
      width: 129px;
    }
  }
}
</style>
<style lang="scss">
.header-data-time-picker {
  .el-input__inner {
    background-color: #001022;
    border-radius: 4px;
    border: solid 1px #1658a0;
    font-family: AlibabaPuHuiTi_2_65_Medium;
    font-size: 16px;
    line-height: 30px;
    color: #ffffff;
    padding-left: 10px;
  }
  .el-input__prefix {
    left: 95px;
    font-size: 16px;
  }
}
</style>
